<template>
	<view class="content">
		<view class="head" style="background-image: url('../../static/image/intelligence-test-result_bg.png');">
			<view class="title_date">测评时间{{time}}</view>
		</view>
		<view class="group">
			<view class="row">
				<view class="point_top">
					<image src="../../static/image/intelligence-test-lianjie.png"></image>
					<image src="../../static/image/intelligence-test-lianjie.png"></image>
				</view>
				<view class="point_buttom">
					<image src="../../static/image/intelligence-test-lianjie.png"></image>
					<image src="../../static/image/intelligence-test-lianjie.png"></image>
				</view>
				
				<view class="ledatu">
					<!--#ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO-->
					<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
					<!--#endif-->
					<!--#ifdef H5 || MP-WEIXIN || APP-PLUS -->
					<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
					<!--#endif-->
				</view>
				
				
			</view>
			<view class="row2">
				<view class="title">
					<image class="title_img" src="../../static/image/intelligence-test-left.png"></image>
					<text>各项学习指标</text>
					<image class="title_img" src="../../static/image/intelligence-test-right.png"></image>
				</view>
				<view class="item_title">
					<view class="itme1"></view>
					<view class="itme2">
						<text>不足</text>
						<text>一般</text>
						<text>良好</text>
						<text>优秀</text>
					</view>
					
				</view>
				<view v-for="(val,index) in datas.keyword_lists" :key="val.title" class="item_data">
					<view class="itme1">{{val.keyword_name}}</view>
					<view class="item_data_itme2">
						<uni-rate :readonly="true" :value="val.coefficient_num" :max="4"></uni-rate>
					</view>
				
				</view>
			</view>
			<view class="row3">
				<view class="point_top">
					<image src="../../static/image/intelligence-test-lianjie.png"></image>
					<image src="../../static/image/intelligence-test-lianjie.png"></image>
				</view>
				<view class="row3_title">
					<image class="row3_title_img" src="../../static/image/intelligence-test-left.png"></image>
					<text>结论与建议</text>
					<image class="row3_title_img" src="../../static/image/intelligence-test-right.png"></image>
				</view>
				<view class="row3_group_text">
					{{datas.conclusion}}
				</view>
			</view>
			<navigator open-type="redirect" url="studycp?type=1" class="btn_cx">重新测试</navigator>
			<navigator open-type="navigateBack" delta="2" class="btn_sr">返回首页</navigator>
		</view>
	</view>
</template>

<script>
	import uniRate from '../../components/uni-rate/uni-rate.vue';
	import wxCharts from '../../components/text/wxcharts.js';
	import cDate from '@/common/util.js';
	var _self;
	export default {
		
		data() {
			return {
				time:'',
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				datas:[
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'},
					{title:'学习兴趣'}
				]
			}
		},
		onLoad:function(){
			/**
			 * 雷达图
			 */
			_self = this;
			this.cWidth=uni.upx2px(670);
			this.cHeight=uni.upx2px(450);
			this.getServerData();
			/**
			 * 加载数据
			 */
			var token = uni.getStorageSync('token');
			this.$zapi.apiPost('user/parevalua.users/userEvaluatingLogDeteil',{'k_token':token}).then(res=>{
				if(res.data.code==200){
					 this.datas=res.data.data;
					// console.log(res.data.data);
					this.time=cDate.getFormatTime(this.datas.update_time)
				}
			});
			
			
		},
		methods: {
			/**
			 * 控制雷达图方法
			 */
				getServerData(){
					let Radar={categories:[],series:[]};
					Radar.categories=['学习能力', '学习动力','学习毅力'];
					Radar.series=[{name: '成交量1',data: [ 120, 165, 195]}]
					_self.showRadar("canvasRadar",Radar);
			},
				
			showRadar(canvasId,chartData){
				new wxCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'radar',
					fontSize:11,
					legend:false,
					background:'#FF9900',
					pixelRatio:_self.pixelRatio,
					animation: false,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						radar: {
							max: 200//雷达数值的最大值
						}
					}
				});
			}
		},
		components: {
			uniRate
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7 !important;
	}
	* {
		margin: 0upx;
		padding: 0upx;
	}

	.content {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.head {
		background-size: 100% 100%;
		width: 100%;
		height: 240upx;
	}

	.title_date {
		padding-top: 20upx;
		font-size: 32upx;
		color: rgba(255, 255, 255, 1);
		text-align: center;

	}

	.group {
		position: absolute;
		top: 54upx;
		left: 5.35%;
		width: 89.3%;
		height: 1000upx;

	}

	.row {
		margin-top: 70upx;
		width: 100%;
		height: 462upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 6px 10px rgba(0, 172, 254, 0.1);
		opacity: 1;
		border-radius: 10px;
	}
	.ledatu{
		width: 100%;
		height: 370upx;
		position: relative;
		top: -166upx;
	}
	.point_top {
		width: 100%;
		height: 106upx;
		position: relative;
		top: -60upx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}

	.point_top image {
		width: 30upx;
		height: 106upx;
		margin: 0upx 100upx;

	}

	.point_buttom {
		width: 100%;
		height: 106upx;
		position: relative;
		top: 315upx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}

	.point_buttom image {
		width: 30upx;
		height: 106upx;
		margin: 0upx 100upx;

	}

	.row2 {
		width: 100%;
		min-height: 300upx;
		margin-top: 20upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 6px 10px rgba(0, 172, 254, 0.1);
		border-radius: 10px;
		padding-bottom: 50upx;
	}
	.row3{
		margin-top: 20upx;
		width: 100%;
		min-height: 460upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 6px 10px rgba(0, 172, 254, 0.1);
		opacity: 1;
		border-radius: 10px;
	}
	.title {
		padding-top: 70upx;
		color: #000000;
		font-size: 36upx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		line-height: 44upx;
	
	}
	
	.title text {
		margin: 0 20upx;
	}
	
	.title_img {
		width: 30upx;
		height: 15upx;
		margin-top: 18upx;
	}
	.item_title{
		width: 88%;
		margin: 10upx auto;
		display: flex;
		justify-content: space-between;
	
	}
	.itme1{
		color: #666666;
		font-size: 34upx;
		width: 25%;
		text-align: center;
	}
	.itme2{
		width: 75%;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.itme2 text{
		color: #999999;
		font-size: 28upx;
		width:25%;
		text-align: center;
	}
	.item_data_itme2{
		width: 75%;
	}
	.item_data{
		width: 88%;
		margin: auto;
		display: flex;
		margin-bottom: 41upx;
		justify-content: space-between;
	}
	
	.uni-rate-icon {
		width: 25%;
		line-height: 0;
		font-size: 0;
		display: flex;
		justify-content: center;
		margin: 0upx !important;
	}
	.uni-rate{
		width: 100%;
		display: flex;
		justify-content: space-between;
		text-align: center;
		font-size: 0;
	}
	.row3_title {
		position: relative;
		top: -50upx;
		color: #000000;
		font-size: 36upx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		line-height: 44upx;
	
	}
	
	.row3_title text {
		margin: 0 20upx;
	}
	
	.row3_title_img {
		width: 30upx;
		height: 15upx;
		margin-top: 18upx;
	}
	
	.row3_group_text {
		margin: auto;
		position: relative;
		top: -30upx;
		width: 84.5%;
		color: #666666;
		font-size: 32upx;
	}
		.btn_cx {
		margin-top: 74upx;
		left: 8%;
		bottom: 146upx;
		width: 100%;
		height: 80upx;
		background:rgba(255,153,0,1);
		opacity: 1;
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 80upx;
		font-size: 34upx;
	}
	.btn_sr {
		margin-top: 20upx;
		left: 8%;
		bottom: 40upx;
		width: 100%;
		height: 80upx;
		background:rgba(0,213,162,1);
		opacity: 1;
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 80upx;
		margin-bottom: 160upx;
		font-size: 34upx;
	}
</style>

<style>
page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
.qiun-padding{padding:2%; width:96%;}
.qiun-wrap{display:flex; flex-wrap:wrap;}
.qiun-rows{display:flex; flex-direction:row !important;}
.qiun-columns{display:flex; flex-direction:column !important;}
.qiun-common-mt{margin-top:10upx;}
.qiun-bg-white{background:#FFFFFF;}
.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
/* 通用样式 */
.qiun-charts{width: 670upx; height:500upx;background-color: #FFFFFF;}
.charts{width: 670upx; height:370upx;background-color: #FFFFFF;}
/* 横屏样式 */
.qiun-charts-rotate{width: 700upx; height:1100upx;background-color: #FFFFFF;padding: 25upx;}
.charts-rotate{width: 700upx; height:1100upx;background-color: #FFFFFF;}
</style>
